import React, { useEffect, useState } from 'react'
import axios from 'axios'
import style from './Detail.module.scss'
import { useSearchParams } from 'react-router-dom'

const Urls = [
  'https://zyxcl.xyz/exam_api/zh',
  'https://zyxcl.xyz/exam_api/xl',
  'https://zyxcl.xyz/exam_api/sx'
]

const Detail = () => {
  const [searchParams] = useSearchParams()
  const [curInfo,setCurInfo] = useState(null)
  const getInfo = async () => {
    const res = await Promise.all(Urls.map(item => axios.get(item)))
    const allList = res.map(it => it.data.items).flat()
    console.log(allList)
    const curItem = allList.find(v => v.item_id === Number(searchParams.get('id')))
    setCurInfo(curItem)
  }


  useEffect(() => {
    getInfo()
  },[])


  console.log(curInfo)


  return (
    <div>
      <h3>{curInfo?.title}</h3>
      <img src={curInfo?.img} width={200} alt="" />
      <p>{curInfo?.price}</p>
    </div>
  )
}

export default Detail